<div class="tlp-framed-vertically">
    {{# header }}
        {{> admin-header }}
    {{/ header }}

    <div class="tlp-framed-horizontally" id="siteadmin-statistics-frequencies">
        <section class="tlp-pane" id="siteadmin-statistics-frequencies-search">
            <div class="tlp-pane-container">
                {{# search_fields }}
                    <div class="tlp-pane-header">
                        <h1 class="tlp-pane-title"><i class="fa fa-search tlp-pane-title-icon"></i> {{ title }}</h1>
                    </div>
                    <section class="tlp-pane-section">
                        <form method="GET" action="index.php" name="date_form">
                            <div class="tlp-form-element">
                                <label for="type" class="tlp-label">{{ type_label }}</label>
                                <select
                                    id="type"
                                    name="type_values[]"
                                    class="tlp-select"
                                >
                                    {{# type_values }}
                                        <option value="{{ value }}" {{# is_selected }}selected{{/ is_selected }}>{{ label }}</option>
                                    {{/ type_values }}
                                </select>
                            </div>
                            <div class="tlp-form-element">
                                <label for="start-date-picker" class="tlp-label">{{ start_date_label }}</label>
                                <div class="tlp-form-element tlp-form-element-prepend">
                                    <span class="tlp-prepend"><i class="fa fa-calendar"></i></span>
                                    <input
                                        type="text"
                                        id="start-date-picker"
                                        name="start"
                                        class="tlp-input tlp-input-date"
                                        size="11"
                                        value="{{ start_date_value }}"
                                    >
                                </div>
                            </div>
                            <div class="tlp-form-element">
                                <label for="end-date-picker" class="tlp-label">{{ end_date_label }}</label>
                                <div class="tlp-form-element tlp-form-element-prepend">
                                    <span class="tlp-prepend"><i class="fa fa-calendar"></i></span>
                                    <input
                                        type="text"
                                        id="end-date-picker"
                                        name="end"
                                        class="tlp-input tlp-input-date"
                                        size="11"
                                        value="{{ end_date_value }}"
                                    >
                                </div>
                            </div>
                            <div class="tlp-form-element">
                                <label for="filter" class="tlp-label">{{ filter_label }}</label>
                                <select
                                    id="filter"
                                    name="filter"
                                    class="tlp-select"
                                >
                                    {{# filter_values }}
                                        <option value="{{ value }}" {{# is_selected }}selected{{/ is_selected }}>{{ label }}</option>
                                    {{/ filter_values }}
                                </select>
                            </div>
                            <button type="submit" class="tlp-button-primary tlp-button-wide">
                                <i class="fa fa-search tlp-button-icon"></i> {{ search }}
                            </button>
                        </form>
                    </section>
                {{/ search_fields }}
            </div>
        </section>

        <section class="tlp-pane" id="siteadmin-statistics-frequencies-graph">
            <div class="tlp-pane-container">
                <div class="tlp-pane-header">
                    <div class="tlp-pane-title">
                        <i class="tlp-pane-title-icon fa fa-bar-chart"></i> {{ frequencies_label }}
                    </div>
                </div>
                <section class="tlp-pane-section">
                    <img src="{{ graph_url }}">
                </section>
            </div>
        </section>
    </div>
</div>
